/* eslint-disable vue/require-prop-types */
<template>
  <div class="flex-table">
    <div class="flex-table-container">
      <el-table
        ref="elTable"
        v-loading="loading"
        border
        :data="data"
        :row-key="rowKey"
        header-row-class-name="ck-table-header"
        :span-method="objectSpanMethod"
        :row-class-name="rowClassName"
        size="mini"
        height="100%"
        :stripe="false"
        :show-header="showHeader"
        :highlight-current-row="highlightCurrentRow"
        :default-expand-all="defaultExpandAll"
        :tree-props="{ ...treeProps }"
        :default-sort="defaultSort"
        :show-summary="showSummary"
        :summary-method="summaryMethod"
        @current-change="handleCurrentChange"
        @sort-change="sortChange"
        @select="rowSelect"
        @selection-change="handleSelectionChange"
        @row-click="rowClick"
        @row-dblclick="dbSelected"
      >
        <el-table-column
          v-if="selection"
          :selectable="selectable"
          :reserve-selection="reserveSelection"
          align="center"
          width="55"
          type="selection"
        />
        <el-table-column v-if="index" align="center" width="55" type="index" label="序号" />
        <template v-for="(item, indexNum) in columns">
          <template v-if="item.type === 'expand'">
            <el-table-column
              :key="indexNum"
              :align="item.align ? item.align : 'left'"
              :fixed="item.fixed"
              type="expand"
            >
              <template slot-scope="props">
                <slot :row="props.row" :index="props.$index" :name="item.dataIndex" />
              </template>
            </el-table-column>
          </template>
          <template v-else-if="item.type === 'otherTag' && !item.checked">
            <el-table-column
              :key="indexNum"
              :align="item.align ? item.align : 'left'"
              :label="item.title"
              :width="item.width"
              :min-width="item.minWidth"
              :fixed="item.fixed"
              :show-overflow-tooltip="!item.hideOverflowTooltp"
            >
              <template slot-scope="props">
                <slot :row="props.row" :index="props.$index" :name="item.dataIndex" />
              </template>
            </el-table-column>
          </template>
          <template v-else-if="item.type === 'hasMerge'">
            <el-table-column
              :key="indexNum"
              :align="item.align ? item.align : 'left'"
              :label="item.title"
              :width="item.width"
              :fixed="item.fixed"
              :show-overflow-tooltip="!item.hideOverflowTooltp"
            >
              <el-table-column
                v-for="(mItem, mIndex) in item.mergeList"
                :key="mIndex"
                :align="item.align ? item.align : 'left'"
                :label="mItem.title"
                :width="mItem.width"
                :fixed="mItem.fixed"
                :prop="mItem.dataIndex"
              />
            </el-table-column>
          </template>
          <template v-else-if="item.type === 'mergeTag'">
            <el-table-column
              :key="indexNum"
              :align="item.align ? item.align : 'left'"
              :label="item.title"
              :width="item.width"
              :fixed="item.fixed"
              :show-overflow-tooltip="!item.hideOverflowTooltp"
            >
              <el-table-column
                v-for="(mItem, mIndex) in item.mergeList"
                :key="mIndex"
                :align="item.align ? item.align : 'left'"
                :label="mItem.title"
                :width="mItem.width"
                :fixed="mItem.fixed"
                :show-overflow-tooltip="!item.hideOverflowTooltp"
                :prop="mItem.dataIndex"
              >
                <template slot-scope="props">
                  <slot :row="props.row" :name="mItem.dataIndex" />
                </template>
              </el-table-column>
            </el-table-column>
          </template>
          <template v-else-if="item.type === 'sort'">
            <el-table-column
              :key="indexNum"
              :prop="item.dataIndex"
              sortable="custom"
              :align="item.align ? item.align : 'left'"
              :label="item.title"
              :fixed="item.fixed"
              :width="item.width"
            />
          </template>
          <template v-else>
            <el-table-column
              v-if="!item.render && !item.checked"
              :key="indexNum"
              :align="item.align ? item.align : 'left'"
              :show-overflow-tooltip="!item.hideOverflowTooltp"
              :width="item.width"
              :prop="item.dataIndex"
              :label="item.title"
              :type="item.type"
              :fixed="item.fixed"
            />
            <el-table-column
              v-if="item.render"
              :key="indexNum"
              :align="item.align ? item.align : 'left'"
              :width="item.width||'200px'"
              :prop="item.dataIndex"
              :label="item.title"
              :type="item.type"
              :fixed="item.fixed"
            >
              <template slot-scope="scope">
                <template v-if="item.render.length <= 3">
                  <template>
                    <TextButton
                      v-for="(item3, index3) in item.render"
                      :key="index + '_' + index3"
                      :type="item3.type"
                      @click.native="btnClick(item3.handlerClick, scope.row)"
                    >
                      <template v-if="item3.img">
                        <img :src="item3.img" alt class="icon-img-table">
                      </template>
                      <template v-else>{{ item3.label }}</template>
                    </TextButton>
                  </template>
                </template>
                <template v-else>
                  <el-dropdown
                    @command="
                      (fnIndex) => btnClickMore(item, item.render[fnIndex])
                    "
                  >
                    <span class="el-dropdown-link">
                      操作
                      <i class="el-icon-arrow-down el-icon--right" />
                    </span>
                    <el-dropdown-menu slot="dropdown">
                      <template>
                        <el-dropdown-item
                          v-for="(item3, index3) in item.render"
                          :key="index3"
                          :command="index3"
                        >{{ item3.label }}</el-dropdown-item>
                      </template>
                    </el-dropdown-menu>
                  </el-dropdown>
                </template>
              </template>
            </el-table-column>
          </template>
        </template>
      </el-table>
    </div>
    <div v-if="!hidePagination" class="pagenation-box">
      <template v-if="showPagination">
        <el-pagination
          ref="pagination"
          class="pagination-container"
          background
          :total="pagination.total"
          :current-page="pagination.current"
          :page-size="pagination.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          @current-change="currentChange"
          @size-change="sizeChange"
        />
      </template>
    </div>
  </div>
</template>
<script>
export default {
  name: 'CkTable',
  // eslint-disable-next-line vue/require-prop-types
  props: [
    // eslint-disable-next-line vue/require-prop-types
    'hidePagination',
    // eslint-disable-next-line vue/require-prop-types
    'tableRowClassName',
    // eslint-disable-next-line vue/require-prop-types
    'columns',
    // eslint-disable-next-line vue/require-prop-types
    'data',
    // eslint-disable-next-line vue/require-prop-types
    'height',
    // eslint-disable-next-line vue/require-prop-types
    'type',
    // eslint-disable-next-line vue/require-prop-types
    'index',
    // eslint-disable-next-line vue/require-prop-types
    'selection',
    // eslint-disable-next-line vue/require-prop-types
    'pagination',
    // eslint-disable-next-line vue/require-prop-types
    'children',
    // eslint-disable-next-line vue/require-prop-types
    'hasChildren',
    // eslint-disable-next-line vue/require-prop-types
    'loading',
    // eslint-disable-next-line vue/require-prop-types
    'rowKey',
    // eslint-disable-next-line vue/require-prop-types
    'isFillHeight',
    // eslint-disable-next-line vue/require-prop-types
    'merge',
    // eslint-disable-next-line vue/require-prop-types
    'mergeIndex',
    // eslint-disable-next-line vue/require-prop-types
    'mergeProp',
    // eslint-disable-next-line vue/require-prop-types
    'highlightCurrentRow',
    // eslint-disable-next-line vue/require-prop-types
    'defaultSort',
    // eslint-disable-next-line vue/require-prop-types
    'selectable',
    // eslint-disable-next-line vue/require-prop-types
    'showHeader',
    // eslint-disable-next-line vue/require-prop-types
    'defaultExpandAll',
    // eslint-disable-next-line vue/require-prop-types
    'treeProps',
    // eslint-disable-next-line vue/require-prop-types
    'reserveSelection',
    // eslint-disable-next-line vue/require-prop-types
    'spanMethod',
    // eslint-disable-next-line vue/require-prop-types
    'showSummary',
    // eslint-disable-next-line vue/require-prop-types
    'summaryMethod'
  ],
  data() {
    return {
      lisenTimer: null,
      pageData: {
        current: 1,
        pageSize: this.pagination && this.pagination.pageSize || 10
      },
      showPagination: true,
      cellList: []
    }
  },
  watch: {
    'pagination.total': {
      handler(newVal, oldVal) {
        const current = this.pagination.current || this.pagination.pageNum
        if (newVal && current > Math.ceil(newVal / this.pagination.pageSize)) {
          this.currentChange(Math.ceil(newVal / this.pagination.pageSize))
        }
      }
    }
  },
  created() {},
  methods: {
    doLayout() {
      this.$refs.elTable.doLayout()
    },
    clearSelection() {
      this.$refs.elTable.clearSelection()
    },
    // 设置当前行
    setCurrentRow(row) {
      if (row) {
        this.$refs.elTable.setCurrentRow(row)
      }
    },
    handleCurrentChange(val) {
      this.$emit('handleCurrentChange', val)
    },
    currentChange(currentPage) {
      this.pageData.current = currentPage
      this.$emit('paginationChange', this.pageData)
    },
    sizeChange(size) {
      this.showPagination = false
      this.pageData.pageSize = size
      this.pageData.current = 1
      this.$nextTick(() => {
        this.showPagination = true
      })
      this.$emit('paginationChange', this.pageData)
    },
    btnClick(handler, item) {
      handler && handler(item)
    },
    btnClickMore(row, fn) {
      fn.handlerClick && fn.handlerClick(row)
    },
    sortChange(column) {
      this.$emit('sortChange', column)
    },
    rowSelect(selection, row) {
      this.$emit('rowSelect', [selection, row])
    },
    handleSelectionChange(row) {
      this.$emit('rowSelection', row)
    },
    dbSelected(row) {
      this.$emit('dbSelected', row)
    },
    rowClassName({ row, rowIndex }) {
      if (this.tableRowClassName) {
        return this.tableRowClassName({ row, rowIndex })
      }
    },
    toggleSelection(rows) {
      if (rows.length) {
        rows.forEach(row => {
          this.data.forEach(item => {
            if (item?.id === row?.id) {
              this.$refs.elTable.toggleRowSelection(item, true)
            }
          })
        })
      }
    },
    // 单选
    tableSelect(selection, row) {
      this.$refs.elTable.clearSelection()
      if (selection.length === 0) {
        // 判断selection是否有值存在
        return
      }
      if (row) {
        this.$refs.elTable.toggleRowSelection(row, true)
      }
    },
    computeCell(data) {
      this.cellList = []
      // 循环遍历表体数据
      for (let i = 0; i < data.length; i++) {
        if (i === 0) {
          // 先设置第一项
          this.cellList.push(1) // 初为1，若下一项和此项相同，就往cellList数组中追加0
          this.count = 0 // 初始计数为0
        } else {
          // 判断当前项与上项的设备类别是否相同，因为是合并这一列的单元格
          if (data[i][this.mergeProp] === data[i - 1][this.mergeProp]) {
            // 如果相等
            this.cellList[this.count] += 1 // 增加计数
            this.cellList.push(0) // 相等就往cellList数组中追加0
          } else {
            this.cellList.push(1) // 不等就往cellList数组中追加1
            this.count = i // 将索引赋值为计数
          }
        }
      }
    },
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (this.spanMethod) {
        return this.spanMethod({ row, column, rowIndex, columnIndex })
      } else {
        if (this.merge) {
          if (columnIndex === this.mergeIndex) {
            const rowCell = this.cellList[rowIndex]
            if (rowCell > 0) {
              const colCell = 1
              return {
                rowspan: rowCell,
                colspan: colCell
              }
            } else {
              return {
                rowspan: 0,
                colspan: 0
              }
            }
          }
        } else {
          return {
            rowspan: 1,
            colspan: 1
          }
        }
      }
    },
    rowClick(row) {
      this.$emit('rowClick', row)
    }
  }
}
</script>
<style lang="less">
.el-table--mini,
.el-table--small,
.el-table__expand-icon {
  font-size: 12px !important;
}

.ck-table-header {
  th {
    background: #fafafa !important;
    height: 32px;
    color: #555555 !important;
  }
}

.flex-table {
  display: flex;
  flex-direction: column;
  flex: 1;
  overflow: hidden;
}

.flex-table-container {
  flex-grow: 1;
  flex-shrink: 1;
  display: flex;
  overflow: hidden;
  height: 100%;
}

.pagenation-box {
  display: flex;
  padding-top: 2px;
  justify-content: flex-end;
}

.icon-img-table {
  width: 15px;
  height: 15px;
  position: relative;
  top: 3px;
}
</style>
